<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('route.userSystemManager') }}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              if (tableSearch) {
                      params.page = 1;
                      tableSearch = false;
                    }
              return $systemTunnyApi.getSystemUserList(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button type="primary" class="icon-button setting-button" style="width: auto;" @click="$refs.SystemManagerFormDialop.init()">
                  <i class="iconfont iconzhongyiicon_chuangjian" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.Create') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto;" @click="deleteSystemManager(tableSlotData.table.selectRows)" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <i class="el-icon-delete" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.BatchDelete') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto;" :disabled="tableSlotData.table.selectRows.length <= 0" @click="() => {
                  for(let i=0;i<tableSlotData.table.selectRows.length;i++){
                    if (tableSlotData.table.selectRows[i].id === AuthModule.userId) {
                      $message.warning($t('user.currentUserAction',{name: AuthModule.username}))
                      return false;
                    }
                  }
                  $systemTunnyApi.changeSystemUserStatus(tableSlotData.table.selectRows, true).then(() => {
                    $message({
                      message: $t('desktopManage.message.operationSuccess', { operation: $t('user.Enable')}),
                      type: 'success'
                    });
                    tableSlotData.table.refresh();
                  });
                }">
                  <i class="el-icon-check" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('user.Enable') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto;" :disabled="tableSlotData.table.selectRows.length <= 0" @click="() => {
                  for(let i=0;i<tableSlotData.table.selectRows.length;i++){
                    if (tableSlotData.table.selectRows[i].id === AuthModule.userId) {
                      $message.warning($t('user.currentUserAction',{name: AuthModule.username}))
                      return false;
                    }
                  }
                  $systemTunnyApi.changeSystemUserStatus(tableSlotData.table.selectRows, false).then(() => {
                    $message({
                      message: $t('desktopManage.message.operationSuccess', { operation: $t('user.Disable')}),
                      type: 'success'
                    });
                    tableSlotData.table.refresh();
                  });
                }">
                  <i class="el-icon-close" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('user.Disable') }}</span>
                </el-button>
                <el-dropdown style="margin-left: 10px;" @command="(cmd) => { switch(cmd) {
                  case 'reset--login-fail-count':
                    resetLoginFailCountLoading = true;
                    $systemTunnyApi.resetLoginCount(tableSlotData.table.selectRows).then(()=>{
                      $message.success($t('user.resetAdminCountSuccess'));
                    }).catch(()=> {
                      $message.error($t('user.resetCountFail'));
                    }).finally(() => {
                      resetLoginFailCountLoading = false;
                    });
                    break;
                } }" :hide-on-click="false">
                  <el-button class="icon-button setting-button" style="width: auto;">
                    <span style="font-size: 12px;">{{$t('common.More')}}</span>
                    <i class="el-icon-arrow-down el-icon--right" style="font-size: 12px; margin-left: 5px;"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :disabled="tableSlotData.table.selectRows.length <= 0 || resetLoginFailCountLoading" :command="'reset--login-fail-count'">{{ $t('user.ResetLoginFailCount') }}<i v-if="resetLoginFailCountLoading" class="el-icon-loading" style="color: #333333; margin-left: 5px;"></i></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="table-right-options">
                <el-input :placeholder="$t('user.SystemManagerPageTableSearchPlaceholder')" @keyup.enter.native="tableSearchChange(tableSlotData)" v-model="searchValue" style="width: 200px;" >
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="username"
                :label="$t('user.Username')"
              >
                <template #default="props">
                  <span>{{ props.row.username }}
                    <el-tooltip class="item" effect="dark" :content="props.row.is_active === true ? $t('user.isEnabled') : ( props.row.is_active === false ? $t('user.isDisabled') : $t('common.unknown'))" placement="bottom-start">
                      <i v-if="props.row.is_active === true" class="iconfont iconzhongyiicon_yunxu" style="font-size: 12px; margin-left: 5px; color: #10C038"></i>
                      <i v-else-if="props.row.is_active === false" class="iconfont iconzhongyiicon_guaqi" style="font-size: 12px; margin-left: 5px; color: #F04134"></i>
                      <i v-else class="iconfont iconzhongyiicon_gaojing" style="font-size: 12px; margin-left: 5px; color: #FF931D"></i>
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="mobile"
                :label="$t('user.MobliePhone')"
              >
                <template #default="props">
                  <span>{{ desensitization(props.row.mobile) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="role_name"
                :label="$t('user.Rules')"
              >
              </el-table-column>
              <el-table-column
                prop="email"
                :label="$t('user.Email')"
              >
              </el-table-column>
              <el-table-column
                :label="$t('user.Action')"
                width="260"
              >
                <template #default="props">
                  <link-button :disabled="props.row.id === AuthModule.userId" :content="$t('user.Delete')" :size="10" :font-size="'12px'" @click="deleteSystemManager([props.row])" style="margin-right: 15px;" />
                  <link-button :content="$t('user.PasswordReset')" :size="10" :font-size="'12px'" @click="resetPassword(props.row)" style="margin-right: 15px;" />
                  <el-dropdown style="cursor: pointer;" @command="(cmd) => {
                    switch(cmd) {
                      case 'enable':
                        $systemTunnyApi.changeSystemUserStatus([props.row], true).then(() => {
                          $message({
                            message: $t('desktopManage.message.operationSuccess', { operation: $t('user.Enable')}),
                            type: 'success'
                          });
                          tableSlotData.table.refresh();
                        });
                        break;
                      case 'disable':
                        $systemTunnyApi.changeSystemUserStatus([props.row], false).then(() => {
                          $message({
                            message: $t('desktopManage.message.operationSuccess', { operation: $t('user.Disable')}),
                            type: 'success'
                          });
                          tableSlotData.table.refresh();
                        });
                        break;
                      case 'edit':
                        $refs.SystemManagerFormDialop.init([JSON.parse(JSON.stringify(props.row))]);
                        break;
                    }
                  }">
                    <span class="el-dropdown-link">
                      {{$t('user.More')}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="'edit'">{{$t('common.edit')}}</el-dropdown-item>
                      <el-dropdown-item :command="'enable'" :disabled="props.row.id === AuthModule.userId || props.row.is_active && props.row.is_active !== ''">{{$t('user.Enable')}}</el-dropdown-item>
                      <el-dropdown-item :command="'disable'" :disabled="props.row.id === AuthModule.userId || props.row.is_active === false && props.row.is_active !== ''">{{$t('user.Disable')}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <delete-dialog ref="DeleteDialog" :delete-method="(itemList) => $systemTunnyApi.deleteSystemUserByIds(itemList).then(() => {
                tableSlotData.table.deleteRefresh(itemList.length);
              })" />
              <reset-password-dialog ref="ResetPasswordDialog" :reset-method="(item, formData) => $systemTunnyApi.changeSystemUserById(item.id, Object.assign(item, { password: formData.new_password }))" />
              <system-manager-form-dialop ref="SystemManagerFormDialop" :submit-method="(item, formData) => {
                if (item.length < 1) {
                  return $systemTunnyApi.createSystemUser(formData).finally(() => {
                    tableSlotData.table.refresh();
                  });
                } else {
                  return $systemTunnyApi.changeSystemUserById(item[0].id, Object.assign(item[0], formData)).finally(() => {
                    tableSlotData.table.refresh();
                  });
                }
              }" />
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import DeleteDialog from './components/DeleteDialog.vue';
import ResetPasswordDialog from './components/ResetPasswordDialog.vue';
import SystemManagerFormDialop from './components/SystemManagerFormDialop.vue';
import { AuthModule } from '../../store/modules/auth';
import { AppModule } from '../../store/modules/app';
import { desensitization } from '../../utils';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    DeleteDialog,
    ResetPasswordDialog,
    SystemManagerFormDialop
  },
  computed: {
    AuthModule: () => AuthModule,
    console: () => console,
    desensitization: () => desensitization
  },
  mounted() {
    this.getAllRules();
  },
  data() {
    return {
      searchValue: "",
      resetLoginFailCountLoading: false,
      tableSearch: false,
      roleList: []
    };
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    deleteSystemManager(itemList: any) {
      for(let i=0;i<itemList.length;i++){
        if (itemList[i].id === AuthModule.userId) {
          (this as any).$message.warning((this as any).$t('user.deleteCurrentUser',{name: AuthModule.username}))
          return false;
        }
      }
      (this as any).$refs.DeleteDialog.init({
        type: 'system_manager',
        itemList
      });
    },
    resetPassword(row: any) {
      (this as any).$refs.ResetPasswordDialog.init({
        item: row,
        type: 'system_admin'
      });
    },
    getAllRules() {
      this.$systemTunnyApi.getAllRules().then((result: any) => {
        console.log("getAllRules", result);
        this.roleList = result.data;
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}

.delete-warning-icon {
  color: #FF931D;
  font-size: 20px;
  margin-right: 10px;

  &::before {
    font-size: 20px;
  }
}
</style>
